<template>
  <el-tabs>
    <el-tab-pane label="正在执行任务">
      <el-collapse>
        <el-collapse-item v-for="item in data.process" :title="item?.name">
          <process-time :item="item"></process-time>
        </el-collapse-item>
      </el-collapse>
    </el-tab-pane>
    <el-tab-pane label="已完成任务">
      <el-collapse>
        <el-collapse-item v-for="item in data.success" :title="item?.name">
          <el-timeline style="max-width: 600px">
            <process-time :item="item"></process-time>
          </el-timeline>
        </el-collapse-item>
      </el-collapse>
    </el-tab-pane>
    <el-tab-pane label="出错任务">
      <el-collapse>
        <el-collapse-item v-for="item in data.error" :title="item?.name">
          <process-time :item="item"></process-time>

        </el-collapse-item>
      </el-collapse>
    </el-tab-pane>
    <el-tab-pane label="任务历史">
      <el-collapse>
        <el-collapse-item v-for="item in data.history" :title="item?.name">
          <process-time :item="item"></process-time>
        </el-collapse-item>
      </el-collapse>
    </el-tab-pane>
  </el-tabs>
</template>
<script setup lang="ts">
import {ProcessFace} from "@/utils/process.ts";
import ProcessTime from "@/components/processTime.vue";

const props = defineProps<{
  data:
      {
        success: ProcessFace[],
        error: ProcessFace[],
        process: ProcessFace[],
        history: ProcessFace[],
      }
}>()

</script>